<template>
  <div>
    <h2>字典管理(⁎⁍̴̛ᴗ⁍̴̛⁎)</h2><hr>
    <div style="padding-right: 2000px">
      <el-button
          size="mini"
          type="primary"
          @click="openAddDictType" class="el-icon-circle-plus">添加</el-button>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          label="字典编号"
          prop="id"
          width="80">
      </el-table-column>
      <el-table-column
          label="字典名称"
          prop="sysName"
          width="120">
      </el-table-column>
      <el-table-column
          label="字典类型"
          prop="sysType"
          width="180">
        <template v-slot="scope">
          <el-button  @click="openSysType(scope.row.sysType,scope.row.id)" type="text">{{scope.row.sysType}}</el-button>
        </template>
      </el-table-column>
      <el-table-column
          label="状态"
          prop="state"
          width="120">
        <template v-slot="scope">
          <el-button v-if="scope.row.state==1" type="success" plain>正常</el-button>
          <el-button v-if="scope.row.state==2" type="warning" plain>停用</el-button>
        </template>
      </el-table-column>
      <el-table-column
          label="备注"
          prop="remarks"
          width="140">
      </el-table-column>
      <el-table-column
          label="创建时间"
          prop="createTime"
          width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="updateDictType(scope.row.id)" class="el-icon-edit">编辑</el-button>
          <el-button
              size="mini"
              type="success"
              @click="openSysType(scope.row.sysType,scope.row.id)" class="el-icon-edit">列表</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="deleteDictType(scope.row.id)" class="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    展示字典列表-->
    <div>
      <el-dialog title="字典列表" :visible.sync="dialogTableVisible">
        <div style="padding-right: 1190px" >
          <el-button type="text"  @click="openAddDict">添加</el-button>
        </div>
        <el-table :data="dictionaryData">
          <el-table-column property="id" label="字典ID" width="70"></el-table-column>
          <el-table-column property="sysName" label="字典标签" width="150"></el-table-column>
          <el-table-column property="sysValue" label="字典键值" width="100"></el-table-column>
          <el-table-column property="sysType" label="字典类型" width="150"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="openUpdateDict(scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="deleteDict(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
<!--    添加字典-->
    <el-dialog title="收货地址" :visible.sync="dialogFormDict">
      <el-form :model="addDictform">
        <el-form-item label="字典标签" :label-width="formLabelWidth">
          <el-input v-model="addDictform.sysName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典键值" :label-width="formLabelWidth">
          <el-input v-model="addDictform.sysValue" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDict">确 定</el-button>
      </div>
    </el-dialog>
<!--修改字典-->
  <div>
    <el-dialog title="收货地址" :visible.sync="dialogFormUpdateDict">
      <el-form :model="updateDictform">
        <el-form-item label="字典标签" :label-width="formLabelWidth">
          <el-input v-model="updateDictform.sysName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典键值" :label-width="formLabelWidth">
          <el-input v-model="updateDictform.sysValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典类型" :label-width="formLabelWidth" >
          <el-input v-model="updateDictform.sysType" disabled="true" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateDict">确 定</el-button>
      </div>
    </el-dialog>
  </div>
<!--   添加字典类型 -->
    <div>
      <el-dialog title="添加字典类型" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="字典名称" :label-width="formLabelWidth">
            <el-input v-model="form.sysName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="字典类型" :label-width="formLabelWidth">
            <el-input v-model="form.sysType" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-radio v-for="(o,index) in stateData" v-model="form.state" :label="o.sysValue" :key="o.id">{{o.sysName}}</el-radio>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.remarks" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="saveOrUpdateDictType">确 定</el-button>
        </div>
      </el-dialog>
    </div>
<!--   修改字典类型 -->
  </div>
</template>

<script>
export default {
  name: "DictionaryView",
  data(){
    return{
      dialogFormUpdateDict:false,
      tableData:[],
      dictionaryData:[{"id":1,"sysName":"男","sysValue":"0","sysType":"tb_user_sex"},{"id":2,"sysName":"女","sysValue":"1","sysType":"tb_user_sex"},{"id":3,"sysName":"未知","sysValue":"2","sysType":"tb_user_sex"}],
      dialogTableVisible:false,
      dialogFormVisible:false,
      formLabelWidth:'120px',
      form:{},
      stateData:[],
      addDictform:{},
      dialogFormDict:false,
      updateDictform:{},
      sysTypes:''
    }
  },methods:{
    /*修改字典表*/
    updateDict(){
      console.log(this.updateDictform)
      this.axios.post("http://172.20.10.5:8003/api/tb-user/updateDict",this.updateDictform).then(res=>{
        console.log(res.data);
        if(res.data=='success'){
          this.$message.success("修改成功！！！！")
          this.dialogFormUpdateDict=false;
          this.dictionaryTypeLisr();
        }

      })
    },
    /*打开嵌套的修改字典表*/
    openUpdateDict(row){
      this.dialogFormUpdateDict=true
      this.updateDictform=row
    },
    /*删除字典表*/
    deleteDict(id){
      this.axios.post("http://172.20.10.5:8003/api/tb-user/deleteDict?id="+id).then(res=>{
        if(res.data=='success'){
          this.$message.success("删除成功！！！！");
          this.dialogTableVisible=false
          this.dictionaryTypeLisr();
        }
      })
    },
    // 添加字典表
    addDict(){
      this.axios.post("http://172.20.10.5:8003/api/tb-user/addDict",this.addDictform).then(res=>{
        if(res.data=='success'){
          this.$message.success("添加成功！！！！");
          this.dialogFormDict=false;
          this.dictionaryList(this.sysTypes);
        }

      })
    },
    //打开添加字典嵌套表
    openAddDict(){
      //alert(a)
      //this.addDictform={}
      this.dialogFormDict=true
    },
    /*字典类型列表*/
    dictionaryTypeLisr(){
      this.axios.post("http://172.20.10.5:8003/api/tb-user/dictionaryTypeLisr").then(res=>{
        console.log("字典类型数据====="+JSON.stringify(res.data))
        this.tableData=res.data;
        //console.log("ppp-==="+res.data)
      })
    },dictionaryList(sysType){
      //alert(222+sysType)
      this.axios.post("http://172.20.10.5:8003/api/tb-user/dictionaryList?sysType="+sysType).then(res=>{
        this.dictionaryData=res.data;
        console.log("字典列表数据：====="+JSON.stringify(res.data))
      })
    },openSysType(sysType,id){
      this.form=[]
      console.log(JSON.stringify(sysType))
      this.dialogTableVisible=true;
        this.dictionaryList(sysType);
        //给添加字典表typeId复制
        this.addDictform.typeId=id
      this.sysTypes=sysType
      //alert(this.addDictform.typeId)
    },
    /*增加字典类型*/
    openAddDictType(){
      this.dialogFormVisible=true;
    },saveOrUpdateDictType(){
      console.log(this.form);
      this.axios.post("http://172.20.10.5:8003/api/tb-user/saveOrUpdateDictType",this.form).then(res=>{
        if(res.data=='success'){
          this.$message.success("操作成功！！")
          this.dialogFormVisible=false;
          this.dictionaryTypeLisr();
        }
        else{
          this.$message.error("字典类型已存在")
        }
      })
    },cancel(){
      this.dialogFormVisible=false
    },
    // 删除字典表类型
    deleteDictType(id){
      this.axios.post("http://172.20.10.5:8003/api/tb-user/deleteDictType?id="+id).then(res=>{
        if(res.data=='success'){
          this.$message.success("删除成功！！")
          this.dictionaryTypeLisr();
        }
      })
    },updateDictType(id){
      //alert(id)
      this.dialogFormVisible=true;
      //根据id区查询字典类型表
      this.axios.post("http://172.20.10.5:8003/api/tb-user/getByIdDictType?id="+id).then(res=>{
        this.form=res.data
      })
    },/*字典状态数据 单选框*/
    dictStateTypeList(){
      this.axios.post("http://172.20.10.5:8003/api/tb-user/dictStateTypeList").then(res=>{
        this.stateData=res.data;
      })
    }
  },created() {
      this.dictionaryTypeLisr();
      this.dictStateTypeList();
  }
}
</script>

<style scoped>

</style>